<template>
  <div>
    <div class="box">
      <div class="header">
        <div v-if="isConnected===false">
          <img class="card" src="../assets/card.png" alt="">


          <img class="link" src="../assets/link.png" alt="">
          <!--          <img class="link" id="link-div" alt=""/>-->
          <button class="buttonOfLink"
                  v-if="isConnected===false"
                  @click="connectToWallet"
                  @mouseenter="play"
                  @mouseleave="stop">
            连接到钱包
          </button>
          <div class="linkContent">请在连接钱包之后查看余额或者进行充值</div>

        </div>
        <div v-else>
          <div class="content">
            <img src="../assets/bitCoin.png" class="WalletLogo" alt="">
            <img class="reFlash" src="../assets/reflash.png" alt="" @click="handleRefresh">
            <div class="balanceHeader">当前余额为：</div>
            <div class="balance">{{ this.balance }}</div>
            <br>
            <el-input-number class="input-number" v-model="amountInput" :precision="2" :min="1" :max="10"
                             :step="1"></el-input-number>
            <button @click="recharge">确认</button>
          </div>
        </div>
      </div>
    </div>
  </div>


</template>

<script>
// eslint-disable-next-line no-unused-vars
import confluxPortal from '../conflux/conflux-portal'
// eslint-disable-next-line no-unused-vars
const {ContractHnuCoin, ContractCopyrightSystemTransactions, ContractCopyright} = require("@/conflux/conflux");
// eslint-disable-next-line no-unused-vars
import {Drip} from "js-conflux-sdk";
import {ElMessage} from "element-plus";
import lottie from 'lottie-web'
import {defineElement} from 'lord-icon-element'
import * as link from '@/assets/11-link-unlink-morph-gradient-edited.json'

defineElement(lottie.loadAnimation)

export default {
  name: 'ReCharge',
  components: {},
  data() {
    return {
      account: '',
      keyInput: '',
      amountInput: '',
      isConnected: false,
      balance: '',

      link_anim: {},
    }
  },
  mounted() {
    this.link_anim = lottie.loadAnimation({
      container: document.getElementById("link-div"),
      renderer: "svg",
      loop: true,
      autoplay: true,
      animationData: link.default,
    })
    this.link_anim.stop()
  },
  methods: {
    play() {
      this.link_anim.play()
    },
    stop() {
      this.link_anim.stop()
    },

    async handleRefresh() {
      this.account = confluxPortal.getAccount();
      this.balance = '加载中...';
      this.balance = Drip(await ContractHnuCoin.contract.balanceOf(this.account)).toCFX() + 'HNUB';
    },

    async connectToWallet() {
      await confluxPortal.enable();
      const account = confluxPortal.getAccount();
      console.log(account);
      if (account === '') {
        this.isConnected = false;
      } else {
        this.isConnected = true;
        this.account = account;
      }
      this.handleRefresh()
    },

    async recharge() {
      if (JSON.parse(sessionStorage.getItem("userObj")).isCertified === 0) {
        ElMessage({
          message: '请先进行实名认证',
          type: 'error'
        })
      } else {
        await confluxPortal.enable();
        this.account = confluxPortal.getAccount();
        if (this.account === '') {
          ElMessage({
            message: '您还未连接conflux钱包插件',
            type: 'warning'
          });
        } else {
          let amount = Drip.fromCFX(this.amountInput).toString()
          try {
            const called = ContractCopyrightSystemTransactions.contract.getMoney.call(amount)
            const transaction = await confluxPortal.sendTransaction({
              from: this.account,
              to: called.to,
              data: called.data,
            })
            const txHash = transaction.result;
            console.log(txHash)
            ElMessage({
              message: "充值成功，请刷新",
              type: "success"
            });
            await this.handleRefresh();
          } catch (e) {
            //上链失败
            ElMessage({
              message: "充值失败",
              type: "error"
            });
          }
        }
      }

    }
  }
}
</script>

<style scoped>
.box {
  background-color: #703CF6;
  height: 400px;
  width: 1000px;
  margin: 100px auto;
  border-radius: 10px;
  box-shadow: 0px 0px 5px 3px #703CF6;
}

.link {
  position: relative;
  left: 180px;
  top: -220px;
  width: 80px;
  height: 80px;
}

.linkContent {
  left: 545px;
  position: relative;
  top: -100px;
  color: white;
  font-weight: 200;
}

.card {
  position: relative;
  left: 20px;
  top: 20px;
  width: 350px;
}

.buttonOfLink {
  background-color: white;
  border: none;
  color: #703CF6;
  border-radius: 10px;
  position: relative;
  top: -140px;
  left: 100px;
  height: 70px;
  width: 160px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 3px;
  z-index: 0;
  cursor: pointer;
  transition: .3s;
}

.buttonOfLink:hover {
  transform: scale(1.2);
}

.WalletLogo {
  width: 300px;
  position: relative;
  left: -120px;
  top: 50px;
}

.balanceHeader {
  position: relative;
  left: 400px;
  top: 50px;
  font-weight: 100;
  font-size: 20px;
  color: white;
  float: left;
  letter-spacing: 3px;
}

.balance {
  letter-spacing: 6px;
  position: relative;
  left: 400px;
  top: -200px;
  font-weight: 900;
  color: white;
  font-size: 45px;
}

.header:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.content input {
  position: fixed;
  left: 420px;
  top: -70px;
  height: 30px;
  font-size: 15px;
  border: 0;
  border-radius: 3px;
  width: 300px;
}

.content button {
  position: relative;
  background-color: white;
  color: #703CF6;
  left: 500px;
  top: -68px;
  font-size: 20px;
  border: none;
  border-radius: 3px;
  height: 35px;
  width: 80px;
}

.input-number {
  position: relative;
  top: -70px;
  left: 420px;
}

.content button:hover {
  cursor: pointer;
  transform: scale(1.1);
}

.reFlash {
  width: 50px;
  position: relative;
  top: -240px;
  left: 500px;
  cursor: pointer;
}

.footer {
  margin-top: 50px;
  margin-left: 25px;
}

.footer .right {
  margin-left: 30px;
}
</style>
